/*
 * @Author: nengwu 409791297@qq.com
 * @Date: 2020-06-28 18:10:13
 * @LastEditors: mylesshie@gmail.com
 * @LastEditTime: 2020-07-10 18:09:36
 * @description:
 */

import React from 'react'
import { View, Text, TouchableOpacity } from 'react-native'
import { Image } from 'react-native-elements'
import { useNavigation } from '@react-navigation/native'
import styles from './styles'

const PreItem = props => {
  const navigation = useNavigation()
  const _goDetail = () => {
    navigation.navigate('Webview', {
      url: props.videoUrl,
      title: props.title
    })
  }

  return (
    <TouchableOpacity onPress={_goDetail}>
      <View style={styles.wrap}>
        <View style={styles.top}>
          <Text style={styles.date}>
            {props.startTime} {props.title}
          </Text>
          <View style={styles.badge}>
            <Text style={styles.badgeText}>直播</Text>
          </View>
        </View>
        <View style={styles.main}>
          <View style={styles.left}>
            {props.teamLeftIcon ? (
              <Image
                style={styles.icon}
                source={{
                  uri: props.teamLeftIcon
                }}
              />
            ) : null}
            <View>
              <Text style={styles.name}>{props.teamLeftTitle}</Text>
            </View>
          </View>
          {props.status === 0 ? (
            <View style={styles.midBox}>
              <View style={[styles.statusBox, styles.statusUnStart]}>
                <Text style={styles.statusText}>未开始</Text>
              </View>
            </View>
          ) : (
            <View style={styles.midBox}>
              <Text style={styles.scroe}>
                {props.scoreLeft} : {props.scoreRight}
              </Text>
              <View style={[styles.statusBox, styles.statusEnd]}>
                <Text style={styles.statusText}>已结束</Text>
              </View>
            </View>
          )}
          <View style={styles.right}>
            {props.teamRightIcon ? (
              <Image
                style={styles.icon}
                source={{
                  uri: props.teamRightIcon
                }}
              />
            ) : null}
            <View>
              <Text style={styles.name}>{props.teamRightTitle}</Text>
            </View>
          </View>
        </View>
        <View style={styles.bottom} />
      </View>
    </TouchableOpacity>
  )
}

export default PreItem
